<template>
  <div class="wang-edit">
    <div id="box"></div>
    <van-button @click="onSubmit">提交按钮</van-button>
    <div v-html="htmlStr"></div>
  </div>
</template>

<script>
import Edit from 'wangeditor'
// 设置，
// 获取。
export default {
  data() {
    return {
      editor: null, // 占了一定的内存空间，但是呢，这个不是vue本身的，需要手动清楚一下
      htmlStr: '',
    }
  },
  mounted() {
    this.editor = new Edit('#box')
    this.editor.create()
    // / editor.txt.html('<p>用 JS 设置的内容</p>') // 重新设置编辑器内容
    if (this.editor) {
      this.editor.txt.html(localStorage.getItem('htmlStr'))
    }
  },
  methods: {
    onSubmit() {
      let res = this.editor.txt.html()
      console.log('res:', res)
      localStorage.setItem('htmlStr', res)
      let data = this.editor.txt.getJSON()
      console.log('data', data)
      this.htmlStr = res
    },
  },
  //
  destroyed() {
    // 性能优化
    this.editor = null
  },
}
</script>

<style></style>
